import type { CSSProperties } from 'react';
import { useMemo } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Image } from 'antd';
import { useModel } from 'umi';
import classNames from 'classnames';

import styles from './index.less';
import { TPL_TYPE, DEFAULT_IMAGE, BOR_STYLE } from '..';

import type { GoodsValue } from '..';
import { join } from 'path';

interface IGoodsViewProps {
  data: GoodsValue;
  goodsList?: any;
}

const GoodsView: React.FunctionComponent<IGoodsViewProps> = (props) => {
  const ALBUM_LIST = [
    TPL_TYPE.oneLineAlbum.value,
    TPL_TYPE.threeLineAlbum.value,
    TPL_TYPE.scrollLeftAlbum.value,
  ];
  const { initialState } = useModel('@@initialState');
  const { imgPrefix } = initialState as { imgPrefix: string };

  const {
    title,
    titleSwitch,
    tplType,
    titleColor,
    bgType,
    bgColor,
    imgRadius,
    isShowOriginal,
    originalPriceColor,
    isShowActivity,
    activityPriceColor,
    isShowAddBtn,
    addBtnColor,
    isShowMoonthSale,
    moonthSaleColor,
    boxRadius,
    goodsData,
    album,
    boxBorder,
  } = props.data;

  const albumImage = useMemo(() => {
    if (!ALBUM_LIST.includes(tplType) || !album || !album[0]?.imageUrl) return DEFAULT_IMAGE;

    return `${imgPrefix}${album[0]?.imageUrl}`;
  }, [album, tplType]);

  const containerStyle = useMemo(() => {
    const style = {
      backgroundColor: bgType === 1 ? bgColor : 'rgba(0,0,0,0)',
    } as CSSProperties;
    if (
      [
        TPL_TYPE.oneLine.value,
        TPL_TYPE.threeLine.value,
        TPL_TYPE.bigImg.value,
        TPL_TYPE.scrollLeft.value,
        TPL_TYPE.oneLineAlbum.value,
        TPL_TYPE.threeLineAlbum.value,
        TPL_TYPE.scrollLeftAlbum.value,
      ].includes(tplType)
    ) {
      if (boxRadius) {
        style.borderRadius = boxRadius;
      }
    }

    return style;
  }, [tplType, boxBorder, boxRadius, bgColor, bgType]);

  const paddingStyle = useMemo(() => {
    const style = {} as CSSProperties;
    if (
      [
        TPL_TYPE.oneLine.value,
        TPL_TYPE.bigImg.value,
        TPL_TYPE.scrollLeft.value,
        TPL_TYPE.oneLineAlbum.value,
        TPL_TYPE.threeLineAlbum.value,
        TPL_TYPE.scrollLeftAlbum.value,
      ].includes(tplType)
    ) {
      if (boxBorder === BOR_STYLE.whithBorder.value) {
        style.paddingLeft = '14px';
        style.paddingRight = '14px';
      }
    }

    return style;
  }, [tplType, boxBorder]);

  const goodsList = useMemo(
    () =>
      goodsData.reduce((r, i) => {
        const c = props.goodsList.find((g: any) => g.productNo === i);
        c && r.push(c);
        return r;
      }, [] as any[]),
    [goodsData, props.goodsList],
  );

  if (goodsList.length === 0) {
    return (
      <div className={styles['goods-container']}>
        <h3 style={{ textAlign: 'center' }}>请添加商品</h3>
      </div>
    );
  }

  return (
    <div
      className={classNames({
        [styles['goods-container']]: true,
        [styles['with-album']]: ALBUM_LIST.includes(tplType),
        [styles['two-line-container']]: tplType === TPL_TYPE.twoLine.value,
        [styles['three-line-container']]: tplType === TPL_TYPE.threeLine.value,
        [styles['one-line-container']]: tplType === TPL_TYPE.oneLine.value,
        [styles['big-img-container']]: tplType === TPL_TYPE.bigImg.value,
        [styles['scroll-left-container']]: tplType === TPL_TYPE.scrollLeft.value,
        [styles['three-line-album-container']]: tplType === TPL_TYPE.threeLineAlbum.value,
        [styles['one-line-album-container']]: tplType === TPL_TYPE.oneLineAlbum.value,
        [styles['scroll-left-album-container']]: tplType === TPL_TYPE.scrollLeftAlbum.value,
      })}
      style={paddingStyle}
    >
      {ALBUM_LIST.includes(tplType) && (
        <div
          className={styles['goods-album']}
          style={{
            backgroundImage: `url(${albumImage})`,
          }}
        >
          {titleSwitch && <span style={{ color: titleColor }}>{title}</span>}
        </div>
      )}
      <div className={styles['goods-container-inner']} style={containerStyle}>
        {tplType === TPL_TYPE.twoLine.value && (
          <div className={classNames(styles['goods-list'], styles['two-line'])}>
            {/* 组件标题 */}
            {titleSwitch && (
              <div className={styles['goods-title']}>
                <div className={styles['title-left-bg']} />
                <span style={{ color: titleColor }}>{title}</span>
                <div className={styles['title-right-bg']} />
              </div>
            )}

            <div className={styles['goods-list']} style={titleSwitch ? {} : { marginTop: 0 }}>
              {goodsList.map((item: any, index: number) => (
                <div
                  className={styles['goods-list-item']}
                  style={{ borderRadius: imgRadius, overflow: 'hidden' }}
                  key={`${item.productNo}-${index}`}
                >
                  <Image
                    draggable="false"
                    className={styles['item-img']}
                    preview={false}
                    src={`${imgPrefix}${item.homeImg}`}
                    fallback=""
                  />
                  <div className={styles['item-info']}>
                    <div className={styles['item-name']}>{item.productName}</div>
                    <div className={styles['item-price-box']}>
                      <div className={styles['item-price']}>
                        <div className={styles['item-price-inner']}>
                          {isShowActivity && (
                            <div className={styles.price} style={{ color: activityPriceColor }}>
                              &yen;<span>{item.salePrice / 100}</span>
                            </div>
                          )}

                          {isShowOriginal && (
                            <div
                              className={styles['outline-price']}
                              style={{ color: originalPriceColor }}
                            >
                              &yen;<span>{item.price / 100}</span>
                            </div>
                          )}
                        </div>
                        {isShowMoonthSale && (
                          <div style={{ color: moonthSaleColor }} className={styles['sale-num']}>
                            已售卖12件
                          </div>
                        )}
                      </div>
                      {isShowAddBtn && (
                        <div
                          className={styles['cart-btn']}
                          style={{ backgroundColor: addBtnColor }}
                        >
                          <PlusOutlined />
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
        {[TPL_TYPE.threeLine.value, TPL_TYPE.threeLineAlbum.value].includes(tplType) && (
          <div
            className={classNames({
              [styles['goods-list']]: true,
              [styles['three-line']]: true,
            })}
            style={{ paddingTop: titleSwitch ? 0 : '12px' }}
          >
            {/* 组件标题 */}
            {titleSwitch && tplType !== TPL_TYPE.threeLineAlbum.value && (
              <div
                className={classNames({
                  [styles['goods-title']]: true,
                })}
              >
                <span style={{ color: titleColor }}>{title}</span>
              </div>
            )}
            <div className={styles['goods-list']}>
              {goodsList.map((item: any, index: number) => (
                <div
                  className={styles['goods-list-item']}
                  style={{ borderRadius: imgRadius, overflow: 'hidden' }}
                  key={`${item.productNo}-${index}`}
                >
                  <Image
                    wrapperClassName={styles['item-img']}
                    draggable="false"
                    preview={false}
                    src={`${imgPrefix}${item.homeImg}`}
                    fallback=""
                  />
                  <div className={styles['item-info']}>
                    <div className={styles['item-name']}>{item.productName}</div>
                    <div className={styles['item-price-box']}>
                      <div className={styles['item-price']}>
                        <div className={styles['item-price-inner']}>
                          {isShowActivity && (
                            <div className={styles.price} style={{ color: activityPriceColor }}>
                              &yen;<span>{item.salePrice / 100}</span>
                            </div>
                          )}
                          {isShowOriginal && (
                            <div
                              className={styles['outline-price']}
                              style={{ color: originalPriceColor }}
                            >
                              &yen;<span>{item.price / 100}</span>
                            </div>
                          )}
                        </div>
                        {isShowMoonthSale && (
                          <div style={{ color: moonthSaleColor }} className={styles['sale-num']}>
                            已售卖12件
                          </div>
                        )}
                      </div>
                      <div className={styles['cart-btn']} style={{ backgroundColor: addBtnColor }}>
                        <PlusOutlined />
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {[TPL_TYPE.oneLine.value, TPL_TYPE.oneLineAlbum.value].includes(tplType) && (
          <div
            className={classNames(styles['goods-list'], styles['one-line'])}
            style={{ paddingTop: titleSwitch ? 0 : '12px' }}
          >
            {/* 组件标题 */}
            {titleSwitch && tplType !== TPL_TYPE.oneLineAlbum.value && (
              <div className={styles['goods-title']}>
                <span style={{ color: titleColor }}>{title}</span>
              </div>
            )}
            <div className={styles['goods-list']}>
              {goodsList.map((item: any, index: number) => (
                <div
                  className={styles['goods-list-item']}
                  key={`${item.productNo}-${index}`}
                  style={{ borderRadius: imgRadius, overflow: 'hidden' }}
                >
                  <Image
                    wrapperClassName={styles['item-img']}
                    draggable="false"
                    preview={false}
                    src={`${imgPrefix}${item.homeImg}`}
                    fallback=""
                  />
                  <div className={styles['item-info']}>
                    <div className={styles['item-name']}>{item.productName}</div>
                    <div className={styles['item-price-box']}>
                      <div className={styles['item-price']}>
                        <div className={styles['item-price-inner']}>
                          {isShowActivity && (
                            <div className={styles.price} style={{ color: activityPriceColor }}>
                              &yen;<span>{item.salePrice / 100}</span>
                            </div>
                          )}
                          {isShowOriginal && (
                            <div
                              className={styles['outline-price']}
                              style={{ color: originalPriceColor }}
                            >
                              &yen;<span>{item.price / 100}</span>
                            </div>
                          )}
                        </div>
                        {isShowMoonthSale && (
                          <div style={{ color: moonthSaleColor }} className={styles['sale-num']}>
                            已售卖12件
                          </div>
                        )}
                      </div>
                      <div className={styles['cart-btn']} style={{ backgroundColor: addBtnColor }}>
                        <PlusOutlined />
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {tplType === TPL_TYPE.bigImg.value && (
          <div
            className={classNames(styles['goods-list'], styles['big-img'])}
            style={{ paddingTop: titleSwitch ? 0 : '12px' }}
          >
            {/* 组件标题 */}
            {titleSwitch && (
              <div className={styles['goods-title']}>
                <span style={{ color: titleColor }}>{title}</span>
              </div>
            )}
            <div className={styles['goods-list']}>
              {goodsList.map((item: any, index: number) => (
                <div
                  className={styles['goods-list-item']}
                  key={`${item.productNo}-${index}`}
                  style={{ borderRadius: imgRadius, overflow: 'hidden' }}
                >
                  <Image
                    wrapperClassName={styles['item-img']}
                    draggable="false"
                    preview={false}
                    src={`${imgPrefix}${item.homeImg}`}
                    fallback=""
                  />
                  <div className={styles['item-info']}>
                    <div className={styles['item-name']}>{item.productName}</div>
                    <div className={styles['item-price-box']}>
                      <div className={styles['item-price']}>
                        <div className={styles['item-price-inner']}>
                          {isShowActivity && (
                            <div className={styles.price} style={{ color: activityPriceColor }}>
                              &yen;<span>{item.salePrice / 100}</span>
                            </div>
                          )}
                          {isShowOriginal && (
                            <div
                              className={styles['outline-price']}
                              style={{ color: originalPriceColor }}
                            >
                              &yen;<span>{item.price / 100}</span>
                            </div>
                          )}
                        </div>
                        {isShowMoonthSale && (
                          <div style={{ color: moonthSaleColor }} className={styles['sale-num']}>
                            已售卖12件
                          </div>
                        )}
                      </div>
                      <div className={styles['cart-btn']} style={{ backgroundColor: addBtnColor }}>
                        <PlusOutlined />
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {[TPL_TYPE.scrollLeft.value, TPL_TYPE.scrollLeftAlbum.value].includes(tplType) && (
          <div
            className={classNames(styles['goods-list'], styles['scroll-left'])}
            style={{ paddingTop: titleSwitch ? 0 : '12px' }}
          >
            {/* 组件标题 */}
            {titleSwitch && tplType !== TPL_TYPE.scrollLeftAlbum.value && (
              <div className={styles['goods-title']}>
                <span style={{ color: titleColor }}>{title}</span>
              </div>
            )}
            <div className={styles['goods-list']}>
              {goodsList.map((item: any, index: number) => (
                <div
                  className={styles['goods-list-item']}
                  key={`${item.productNo}-${index}`}
                  style={{ borderRadius: imgRadius, overflow: 'hidden' }}
                >
                  <Image
                    wrapperClassName={styles['item-img']}
                    draggable="false"
                    preview={false}
                    src={`${imgPrefix}${item.homeImg}`}
                    fallback=""
                  />
                  <div className={styles['item-info']}>
                    <div className={styles['item-name']}>{item.productName}</div>
                    <div className={styles['item-price-box']}>
                      <div className={styles['item-price']}>
                        <div className={styles['item-price-inner']}>
                          {isShowActivity && (
                            <div className={styles.price} style={{ color: activityPriceColor }}>
                              &yen;<span>{item.salePrice / 100}</span>
                            </div>
                          )}
                          {isShowOriginal && (
                            <div
                              className={styles['outline-price']}
                              style={{ color: originalPriceColor }}
                            >
                              &yen;<span>{item.price / 100}</span>
                            </div>
                          )}
                        </div>
                        {isShowMoonthSale && (
                          <div style={{ color: moonthSaleColor }} className={styles['sale-num']}>
                            已售卖12件
                          </div>
                        )}
                      </div>
                      <div className={styles['cart-btn']} style={{ backgroundColor: addBtnColor }}>
                        <PlusOutlined />
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );

  // return (
  //   <div className={styles['goods-container']}>
  //     {/* 组件标题 */}
  //     {titleSwitch ? (
  //       <div className={styles['good-body-title']}>
  //         {tplType === TPL_TYPE.twoLine.value && <div className={styles['title-left-bg']} />}
  //         <span
  //           className={`${styles['title-text']} ${
  //             tplType === TPL_TYPE.twoLine.value ? styles['no-padding'] : ''
  //           }`}
  //         >
  //           {title}
  //         </span>
  //         {tplType === TPL_TYPE.twoLine.value && <div className={styles['title-right-bg']} />}
  //       </div>
  //     ) : null}

  //     {/* 两列 */}
  //     {tplType === TPL_TYPE.twoLine.value && (
  //       <div className={styles['two-line-body']}>
  //         {goodsData.map((item: any) => (
  //           <div
  //             className={styles['two-line-solo']}
  //             key={item.id}
  //             style={{ borderRadius: boxRadius, backgroundColor: bgColor }}
  //           >
  //             <Image
  //               draggable="false"
  //               className={styles['two-line-img']}
  //               preview={false}
  //               src={`${imgPrefix}${item.value.homeImg}`}
  //               style={{ borderRadius: imgRadius, overflow: 'hidden' }}
  //               fallback=""
  //             />
  //             <div style={{ padding: '10px' }}>
  //               <div className={styles['two-line-name']} style={{ color: titleColor }}>
  //                 {item.value.productName}
  //               </div>
  //               {isShowMoonthSale && (
  //                 <div className={styles['two-line-sale']} style={{ color: moonthSaleColor }}>
  //                   月售200
  //                 </div>
  //               )}
  //               <div className={styles['btn-body']}>
  //                 <div className={styles['btn-left']}>
  //                   {isShowActivity && (
  //                     <span style={{ color: activityPriceColor }}>
  //                       ￥<span className={styles['price-cur']}>8.9</span>
  //                     </span>
  //                   )}
  //                   {isShowOriginal && (
  //                     <span className={styles['price-line']} style={{ color: originalPriceColor }}>
  //                       ￥9.9
  //                     </span>
  //                   )}
  //                 </div>
  //                 {isShowAddBtn ? (
  //                   <div className={styles['btn-right']} style={{ backgroundColor: addBtnColor }}>
  //                     <PlusOutlined />
  //                   </div>
  //                 ) : null}
  //               </div>
  //             </div>
  //           </div>
  //         ))}
  //       </div>
  //     )}

  //     {/* 三列 */}
  //     {[TPL_TYPE.threeLine.value, TPL_TYPE.threeLineAlbum.value].includes(tplType) && (
  //       <div
  //         className={styles['three-line-box']}
  //         style={{ backgroundColor: bgColor, borderRadius: boxRadius }}
  //       >
  //         {tplType === TPL_TYPE.threeLineAlbum.value && (
  //           <div className={styles.album}>
  //             <img src={albumImage} />
  //           </div>
  //         )}
  //         <div className={styles['three-line-body']}>
  //           {goodsData.map((item: any) => (
  //             <div className={styles['two-line-solo']} key={item.id}>
  //               <Image
  //                 draggable="false"
  //                 className={styles['two-line-img']}
  //                 preview={false}
  //                 src={`${imgPrefix}${item.value.homeImg}`}
  //                 style={{ borderRadius: imgRadius, overflow: 'hidden' }}
  //               />
  //               <div className={styles['two-line-name']} style={{ color: titleColor }}>
  //                 啊实打实大师啊实打实大师啊实打实大师啊实打实大师
  //               </div>
  //               {isShowActivity && (
  //                 <div className={styles['two-line-sale']} style={{ color: activityPriceColor }}>
  //                   ￥9.9
  //                 </div>
  //               )}
  //             </div>
  //           ))}
  //         </div>
  //       </div>
  //     )}

  //     {/* 单列 */}
  //     {[TPL_TYPE.oneLine.value, TPL_TYPE.oneLineAlbum.value].includes(tplType) && (
  //       <>
  //         {tplType === TPL_TYPE.oneLineAlbum.value && (
  //           <div className={styles.album}>
  //             <img src={albumImage} />
  //           </div>
  //         )}
  //         <div className={styles['one-line-body']}>
  //           {goodsData.map((item: any) => (
  //             <div
  //               className={styles['one-line-solo']}
  //               key={item.id}
  //               style={{ borderRadius: boxRadius, backgroundColor: bgColor }}
  //             >
  //               <Image
  //                 style={{ borderRadius: imgRadius }}
  //                 draggable="false"
  //                 className={styles['one-line-img']}
  //                 preview={false}
  //                 src={`https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG`}
  //               />
  //               <div className={styles['one-line-right']}>
  //                 <div className={styles['two-line-name']} style={{ color: titleColor }}>
  //                   啊实打实大师啊实打实大师啊实打实大师啊实打实大师
  //                 </div>
  //                 {isShowMoonthSale ? (
  //                   <div className={styles['two-line-content']} style={{ color: moonthSaleColor }}>
  //                     啊实打实大师啊实打实大师啊实打实大师啊实打实大师
  //                   </div>
  //                 ) : (
  //                   <div className={styles['two-line-content']} style={{ color: moonthSaleColor }}>
  //                     {''}
  //                   </div>
  //                 )}

  //                 <div className={styles['btn-body']}>
  //                   <div className={styles['btn-left']}>
  //                     {isShowActivity && (
  //                       <span style={{ color: activityPriceColor }}>
  //                         ￥<span className={styles['price-cur']}>9.9</span>
  //                       </span>
  //                     )}
  //                     {isShowOriginal && (
  //                       <span
  //                         className={styles['price-line']}
  //                         style={{ color: originalPriceColor }}
  //                       >
  //                         ￥9.9
  //                       </span>
  //                     )}
  //                   </div>
  //                   {isShowAddBtn ? (
  //                     <div className={styles['btn-right']} style={{ backgroundColor: addBtnColor }}>
  //                       <PlusOutlined />
  //                     </div>
  //                   ) : null}
  //                 </div>
  //               </div>
  //             </div>
  //           ))}
  //         </div>
  //       </>
  //     )}

  //     {/* 大图 */}
  //     {tplType === TPL_TYPE.bigImg.value && (
  //       <div className={styles['big-img-body']} style={{ backgroundColor: bgColor }}>
  //         {goodsData.map((item: any) => (
  //           <div
  //             className={styles['two-line-solo']}
  //             key={item.id}
  //             style={{ borderRadius: imgRadius }}
  //           >
  //             <Image
  //               draggable="false"
  //               className={styles['two-line-img']}
  //               preview={false}
  //               src={`https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG`}
  //             />
  //             <div className={styles['two-line-bottom']}>
  //               <div className={styles['two-line-name']} style={{ color: titleColor }}>
  //                 啊实打实大师啊实打实大师啊实打实大师啊实打实大师
  //               </div>
  //               {isShowMoonthSale && (
  //                 <div className={styles['two-line-sale']} style={{ color: moonthSaleColor }}>
  //                   月售20
  //                 </div>
  //               )}
  //               <div className={styles['btn-body']}>
  //                 <div className={styles['btn-left']}>
  //                   {isShowActivity && (
  //                     <div style={{ color: activityPriceColor }}>
  //                       ￥<span className={styles['price-cur']}>9.9</span>
  //                     </div>
  //                   )}
  //                   {isShowOriginal && (
  //                     <span className={styles['price-line']} style={{ color: originalPriceColor }}>
  //                       ￥9.9
  //                     </span>
  //                   )}
  //                 </div>
  //                 {isShowAddBtn ? (
  //                   <div className={styles['btn-right']} style={{ backgroundColor: addBtnColor }}>
  //                     <PlusOutlined />
  //                   </div>
  //                 ) : null}
  //               </div>
  //             </div>
  //           </div>
  //         ))}
  //       </div>
  //     )}

  //     {/* 左滑 */}
  //     {[TPL_TYPE.scrollLeft.value, TPL_TYPE.scrollLeftAlbum.value].includes(tplType) && (
  //       <>
  //         {tplType === TPL_TYPE.scrollLeftAlbum.value && (
  //           <div className={styles.album}>
  //             <img src={albumImage} />
  //           </div>
  //         )}
  //         <div className={styles['rotate-body-father']} style={{ backgroundColor: bgColor }}>
  //           <div className={styles['rotate-body']}>
  //             <div className={styles['new-ul']}>
  //               {goodsData.map((item: any) => (
  //                 <div
  //                   className={styles['new-li']}
  //                   key={item.id}
  //                   style={{ borderRadius: imgRadius }}
  //                 >
  //                   <Image
  //                     draggable="false"
  //                     className={styles['rotate-line-img']}
  //                     preview={false}
  //                     src={`https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG`}
  //                   />
  //                   <div className={styles['rotate-bottom']}>
  //                     <div className={styles['two-line-name']} style={{ color: titleColor }}>
  //                       啊实打实大师啊实打实大师啊实打实大师啊实打实大师
  //                     </div>
  //                     <div className={styles['btn-body']}>
  //                       <div className={styles['btn-left']}>
  //                         {isShowActivity && (
  //                           <div
  //                             className={styles['price-cur']}
  //                             style={{ color: activityPriceColor }}
  //                           >
  //                             ￥9.9
  //                           </div>
  //                         )}
  //                         {isShowOriginal && (
  //                           <div
  //                             className={styles['price-line']}
  //                             style={{ color: originalPriceColor }}
  //                           >
  //                             ￥9.9
  //                           </div>
  //                         )}
  //                       </div>
  //                       {isShowAddBtn ? (
  //                         <div
  //                           className={styles['btn-right']}
  //                           style={{ backgroundColor: addBtnColor }}
  //                         >
  //                           <PlusOutlined />
  //                         </div>
  //                       ) : null}
  //                     </div>
  //                   </div>
  //                 </div>
  //               ))}
  //             </div>
  //           </div>
  //         </div>
  //       </>
  //     )}
  //   </div>
  // );
};

export default GoodsView;
